<route>
{
    meta: {
        title: '实验室预约信息审批'
    }
}
</route>

<template>

  <div class="app-container"
       style="margin-left: 20px; margin-right: 20px;margin-top: 35px;">
    <!-- style="margin-left: 20px;margin-top: 20px;" -->

    <el-row>
      <el-col :span="24">
        <el-form :model="queryParams"
                 ref="queryFormRef"
                 :inline="true"
                 label-width="90px">
          <el-form-item label="实验室名称"
                        prop="appointment_user">
            <el-input v-model="queryParams.lab_site"
                      placeholder="请输入实验室名称"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="实验室类型"
                        prop="appointment_type">
            <el-input v-model="queryParams.appointment_type"
                      placeholder="请输入实验室类型"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="申请人"
                        prop="appointment_user">
            <el-input v-model="queryParams.appointment_user"
                      placeholder="请输入实验室申请人"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="申请类型">
            <el-select v-model="appointment_flag"
                       placeholder="未批准">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary"
                       :icon="Search"
                       @click="handleQuery"
                       round
                       plain>搜索</el-button>
            <el-button :icon="Refresh"
                       @click="resetQuery"
                       round
                       plain>重置</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>

    <el-divider>
      <el-icon>
        <star-filled />
      </el-icon>
    </el-divider>

    <el-row>
      <el-table :data="labList">
        <el-table-column fixed=""
                         type="index"
                         label="序号"
                         :index="pageNum" />

        <el-table-column label="实验室名称"
                         prop="lab_site" />

        <el-table-column prop="appointment_time"
                         label="预约时间" />
        <el-table-column prop="appointment_user"
                         label="预约人" />
        <el-table-column prop="appointment_type"
                         label="实验室类型" />
        <el-table-column label="使用标识"
                         prop="appointment_flag"
                         v-if="queryParams.appointment_flag==1">
          <template #default="scope">
            <el-button-group>
              <el-button color="#626aef"
                         style="color: white"
                         @click="updateAppointmentFlag(scope.row,2)">同意</el-button>
              <el-button color="#626aef"
                         style="color: white"
                         @click="updateAppointmentFlag(scope.row,3)">不同意</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <pagination
            v-show="page.total > 0"
            :total="page.total"
            v-model:page="page.pageNum"
            v-model:limit="page.pageSize"
            @pagination="getList"
        />
    </el-row>
  </div>

</template>

<script lang="ts" setup>
import {
  StarFilled,
  Edit,
  Share,
  Delete,
  Search,
  Upload,
  Refresh,
  Plus,
  User,
} from '@element-plus/icons-vue'
import {
  defineComponent,
  onMounted,
  reactive,
  toRef,
  ref,
  computed,
  toRefs,
  getCurrentInstance,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'

const labList = ref([])
const loading = ref(true)
const queryFormRef = ref(null)
const open = ref(false)
const title = ref('')
const pageNum = ref(1)
//是否批准进行查询
const options = [
  {
    value: 1,
    label: '未审批',
  },
  {
    value: 2,
    label: '审批通过',
  },
  {
    value: 3,
    label: '不同意',
  },
  {
    value: 4,
    label: '过期申请',
  },
]
const appointment_flag = ref(1)
/**查询条件 */
const queryParams = ref({
  appointment_user: '',
  appointment_type: '',
  lab_site: '',
  appointment_flag: 1,
})
const page = ref({
  total: 1,
  currentpage: 1,
  pagesize: 10,
  pageNum:1
})
/**获取表单数据*/
const getList = () => {
  loading.value = true
  console.log(queryParams.value)
  api
    .post('labAppointment/selectAppointmentByFlag/'+page.value.pageNum, queryParams.value)
    .then((res) => {
      page.value.total = res.data.total
      loading.value = false
      labList.value = res.data.list
      console.log('tableData=', labList.value)
    })
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.appointment_flag = appointment_flag.value
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/**更新申请审批的状态 */
const updateAppointmentFlag = (row, flag) => {
  const id = row.id
  row.appointment_flag = flag
  const appointment_flag = flag
  api
    .post('labAppointment/updateAppointmentFlag', { id, appointment_flag })
    .then((res) => {
      getList()
    })
}
getList()
</script>
